<template>
    <div>
      <el-card shadow="always">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="用户名 :">
            <el-input v-model="formInline.name" placeholder="用户名" size="small"></el-input>
          </el-form-item>
          <el-form-item label="时间 :">
            <el-date-picker
              v-model="dateValue"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="text" @click="handleClick(formInline,'search')" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-button type="text" icon="el-icon-edit" @click="alert('请使用表格中的编辑!')">编辑</el-button>
      <el-button type="text" icon="el-icon-circle-plus-outline" @click="handleClick({},'add')">添加</el-button>
      <el-button type="text" icon="el-icon-delete" @click="handleClick({},'delete')">删除</el-button>
      <el-button type="text" icon="el-icon-search" @click="openVn">共享</el-button>
      <el-table
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column
          prop="createDateTime"
          label="日期"
          min-width="180">
          <template slot-scope="scope">
            {{scope.row.createDateTime | dateString}}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="modifyDateTime"
          label="修改时间"
          min-width="150">
          <template slot-scope="scope">
            {{scope.row.modifyDateTime | dateString}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,'see')" type="text"  icon="el-icon-info" size="small">查看</el-button>
            <el-button @click="handleClick(scope.row,'edit')" type="text" icon="el-icon-edit" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <hyl-pagination v-on:fetch="fetch" :total="total"/>

      <el-dialog
      title="编辑"
      :visible.sync="editDialogVisible"
      width="40%">
      <el-form  label-width="80px" :model="rowData">
        <el-form-item label="用户">
          <el-input v-model="rowData.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="rowData.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel('edit')">取 消</el-button>
        <el-button type="primary" @click="handleOk(rowData,'edit')">确 定</el-button>
      </span>
    </el-dialog>

      <el-dialog
        title="添加"
        :visible.sync="addDialogVisible"
        width="40%">
        <el-form  label-width="80px" :model="addData">
          <el-form-item label="用户">
            <el-input v-model="addData.name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="addData.password"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel('add')">取 消</el-button>
        <el-button type="primary" @click="handleOk(addData,'add')">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>

<script>
import {fetch, put, del, post} from '@/utils/http'
import moment from 'moment'
import hylPagination from '@/components/pagination'
export default {
  name: 'User',
  components: {
    hylPagination
  },
  data () {
    return {
      tableData: [],
      total: 0,
      page: 1,
      limit: 5,
      formInline: {
        name: '',
        region: '',
        createDateTimeStart: '',
        createDatetimeEnd: ''
      },
      dateValue: [],
      editDialogVisible: false,
      addDialogVisible: false,
      rowData: {},
      addData: {
        name: '',
        password: ''
      },
      multipleSelection: []
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
      // console.log(val)
    },
    openVn () {
      const h = this.$createElement
      this.$message({
        message: h('p', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ])
      })
    },
    handleClick (row = {}, type = '') {
      if (type === 'edit') {
        this.rowData = row
        this.editDialogVisible = true
      } else if (type === 'delete') {
        if (this.multipleSelection.length > 0) {
          let ids = ''
          this.multipleSelection.forEach((selection) => {
            ids = ids + selection.id + ','
          })
          del('long-base-upms/sysUser/deleteBatch', {params: {ids: ids.slice(0, ids.length - 1)}}).then((res) => {
            this.$message.success(res.data.message)
            this.fetch()
          })
          console.log(ids.slice(0, ids.length - 1))
        } else {
          this.$confirm('此操作需要至少选中一行, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
      } else if (type === 'add') {
        this.addDialogVisible = true
      } else if (type === 'search') {
        console.log(this.dateValue.length)
        if (this.dateValue.length > 0) {
          row.createDateTimeStart = moment(this.dateValue[0]).isValid() ? moment(this.dateValue[0]).format('YYYY-MM-DD HH:mm:ss') : undefined
          row.createDatetimeEnd = moment(this.dateValue[1]).isValid() ? moment(this.dateValue[1]).format('YYYY-MM-DD HH:mm:ss') : undefined
        }
        let page = {
          page: 1,
          limit: 5
        }
        Object.assign(page, row)
        // console.log(page)
        this.fetch(page)
      }
      // console.log(row)
    },
    handleOk (row, type) {
      if (type === 'edit') {
        put('long-base-upms/sysUser/update', row).then((res) => {
          const h = this.$createElement
          this.$message({
            message: h('p', null, [
              h('i', { style: 'color: teal' }, '更新成功!')
            ])
          })
          this.editDialogVisible = false
        })
      } else if (type === 'add') {
        // post('long-base-upms/sysUser/add', {params: row} 这个是url?name=xxxx).then((res) => { 还有 {data: row}
        post('long-base-upms/sysUser/add', row).then((res) => {
          this.$message.success('添加用户成功!')
          this.addDialogVisible = false
          this.fetch()
        })
      }
      console.log(row)
    },
    handleCancel (type) {
      if (type === 'edit') {
        this.editDialogVisible = false
      } else if (type === 'add') {
        this.addDialogVisible = false
      }
    },
    indexMethod (index) {
      // return index + 1
      return index + 1 + (this.page - 1) * this.limit
    },
    fetch (page = {
      page: 1,
      limit: 5
    }) {
      fetch('long-base-upms/sysUser/page', page).then((res) => {
        this.tableData = res.data.rows
        this.total = res.data.total
        this.page = page.page
        this.limit = page.limit
      })
    }
  },
  mounted: function () {
    this.fetch()
  }
}
</script>

<style scoped>

</style>
